<template>
  <j-modal
    :title="title"
    :width="600"
    :visible="visible"
    :maskClosable="false"
    @close="close"
    cancelText="关闭"
  >
    <div style="margin: 0 auto" :class="{ isCheck: isCheck }">
      <a-form-model ref="form" :label-col="labelCol" :wrapper-col="wrapperCol">
        <a-form-model-item label="节点名称">
          <a-input v-model="model.nodeName" placeholder="请输入节点名称"></a-input>
        </a-form-model-item>
        <a-form-model-item v-if="!model.id" label="上级节点" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <a-select v-model="model.nodeCode" placeholder="请选择上级节点名称">
            <a-select-option v-for='(item,index) in nodeList' :key='item.id' :value="item.nodeCode">
              {{item.nodeName}}
            </a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item label="角色" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <a-select mode="multiple" v-model="model.roles" placeholder="请选择角色">
            <a-select-option
              v-for="(item,index) in rolesOptions"
              :key="index"
              :value="item.value">
              <span style="display: inline-block;width: 100%" :title=" item.text || item.label ">
                {{ item.text || item.label }}
              </span>
            </a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item label="菜单" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <a-select v-model="model.menuIdentify" placeholder="请选择菜单">
            <a-select-option
              v-for="(item,index) in menusOptions"
              :key="index"
              :value="item.value">
              <span style="display: inline-block;width: 100%" :title=" item.text || item.label ">
                {{ item.text || item.label }}
              </span>
            </a-select-option>
          </a-select>
        </a-form-model-item>
      </a-form-model>
    </div>
    <!-- table区域-end -->
  </j-modal>
</template>
<script>
  import {httpAction, getAction} from '@/api/manage'
  import {addUser, editUser, queryUserRole, queryall} from '@/api/api'

  export default {
    name: 'jdpzModal',
    components: {},
    data() {
      return {
        id: '',
        title: '',
        labelCol: {span: 4},
        wrapperCol: {span: 18},
        nodeList: [],
        visible: false,
        isCheck: false,
        model: {},
        rolesOptions: [],
        menusOptions: [],
        url: {
          list: '/process/list',
          add: "/process/add",
          edit: "/process/edit",
          menuList: "process/queryMenuList",
        },
      }
    },
    created() {
    },
    watch: {},
    methods: {
      getList() {
        getAction(this.url.list, {modelCode: this.id}).then((res) => {
          if (res.success) {
            this.nodeList = res.result.records || res.result;
          }
        })
      },
      initRoleList() {
        queryall().then((res) => {
          if (res.success) {
            this.rolesOptions = res.result.map((item, index, arr) => {
              let c = {label: item.roleName, value: item.id}
              return c;
            })
            console.log('this.rolesOptions: ', this.rolesOptions)
          }
        });
      },
      initMenuList() {
        getAction(this.url.menuList, { systemType: '1' }).then((res) => {
          if (res.success) {
            this.menusOptions = res.result.map((item, index, arr) => {
              let c = {label: item.name, value: item.menuIdentify}
              return c;
            })
            console.log('this.menusOptions: ', this.rolesOptions)
          }
        });
      },
      add(id) {
        this.id = id
        this.model = {modelCode: id}
        this.visible = true
        this.initRoleList()
        this.initMenuList()
        this.getList()

      },
      edit(record) {
        this.model = Object.assign({}, record)
        if (this.model.roles) {
          this.model.roles = this.model.roles.split(',');
        }else{
          this.model.roles = []
        }
        this.visible = true
        this.initRoleList()
        this.initMenuList()
        this.getList()

      },
      close(isSubmit) {
        if (isSubmit) {
          this.saveData()
        } else {
          this.visible = false
        }
      },
      saveData() {
        let url
        if (!this.model.id) {
          url = this.url.add
        } else {
          url = this.url.edit
        }
        this.model.roles = this.model.roles.toString()
        httpAction(url, this.model, 'post').then((res) => {
          if (res.success) {
            this.$message.success(res.message)
            this.$emit('ok')
            this.visible = false
          } else {
            this.$message.error(res.message);
          }
        })
      }
    },
  }
</script>

<style lang="less" scoped>

  .name-type {
    width: 110px;
    margin-left: 5px;
    border: 1px solid #e0e0e0;

    /deep/ .ant-select-selection {
      box-sizing: border-box;
      min-height: 27px !important;

      .ant-select-selection__rendered {
        line-height: 27px !important;
      }
    }
  }
</style>
